<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { onMounted, ref } from 'vue'
import { Table } from '@/components/Table'
import { useRouter } from 'vue-router'
import { BaseButton } from '@/components/Button'
import { SysFileListVo, SysFileSearchQo } from '@/api/system/file/SysFile/types'
import { sysFileDeleteApi, sysFileDownloadApi, sysFilePageApi } from '@/api/system/file/SysFile'
import { AllSchemas, useBasePageView } from '@/base/views/BasePageView'
import { TableSortProps } from '@/components/Table/src/types'
import { sysDictChooseListApi } from '@/api/system/dict/SysDict'
import { KeyLabelValueVo } from '@/base/api/KeyLabelValueVo'
import { selectSysAccountNameListApi } from '@/api/system/account/SysAccount'
// [[ OnflowGenerator Range (- selectFunctionImport -) Start ]]

// [[ OnflowGenerator Range (- selectFunctionImport -) End ]]

defineOptions({
  name: 'SysFilePage'
})
const { push } = useRouter()

const pageView = useBasePageView<SysFileListVo, SysFileSearchQo>('SysFile')
const {
  pageInfo,
  delLoading,
  loading,
  dataList,
  baseGetList,
  searchParams,
  baseSortChange,
  datePickerShortcuts,
  registerRefreshEvent,
  editUrl,
  addUrl
} = pageView

const getList = async (params: any) => {
  await baseGetList(params, sysFilePageApi)
}
pageView.doWatch(getList)
// [[ OnflowGenerator Range (- dictFunctions -) Start ]]
const moduleNameOptions = ref<Array<KeyLabelValueVo>>([])
const getModuleName = async () => {
  const res = await sysDictChooseListApi('sysModuleName')
  moduleNameOptions.value = res.data
}
getModuleName()
const platformTypeOptions = ref<Array<KeyLabelValueVo>>([])
const getPlatformType = async () => {
  const res = await sysDictChooseListApi('platformType')
  platformTypeOptions.value = res.data
}
getPlatformType()
const sourceTypeOptions = ref<Array<KeyLabelValueVo>>([])
const getSourceType = async () => {
  const res = await sysDictChooseListApi('sysFileSourceType')
  sourceTypeOptions.value = res.data
}
getSourceType()
const fileGradeOptions = ref<Array<KeyLabelValueVo>>([])
const getFileGrade = async () => {
  const res = await sysDictChooseListApi('sysFileGrade')
  fileGradeOptions.value = res.data
}
getFileGrade()

// [[ OnflowGenerator Range (- dictFunctions -) End ]]

// [[ OnflowGenerator Range (- selectFunctions -) Start ]]

// [[ OnflowGenerator Range (- selectFunctions -) End ]]

const sysAccountNameList = ref<Array<KeyLabelValueVo>>([])
const getSysAccountNameList = async () => {
  const res = await selectSysAccountNameListApi({})
  sysAccountNameList.value = res.data
}
getSysAccountNameList()

const delData = async (row: SysFileListVo | null) => {
  await pageView.delData(row, sysFileDeleteApi, () => {
    getList({ ...searchParams.value })
  })
}

const sortChange = async (sortProps: TableSortProps) => {
  await baseSortChange(sortProps, sysFilePageApi)
}

const allSchemas = ref<AllSchemas>({
  searchSchema: [
    // [[ OnflowGenerator Range (- searchSchemas -) Start ]]
    {
      field: 'id',
      label: '主键id',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请选择主键id',
        clearable: true
      }
    },
    {
      field: 'fileName',
      label: '文件名',
      component: 'Input',
      componentProps: {
        placeholder: '请输入文件名',
        clearable: true
      }
    },
    {
      field: 'originFileName',
      label: '原文件名',
      component: 'Input',
      componentProps: {
        placeholder: '请输入原文件名',
        clearable: true
      }
    },
    {
      field: 'storePath',
      label: '文件存储路径',
      component: 'Input',
      componentProps: {
        placeholder: '请输入文件存储路径',
        clearable: true
      }
    },
    {
      field: 'containerType',
      label: '容器类型',
      component: 'Input',
      componentProps: {
        placeholder: '请输入容器类型',
        clearable: true
      }
    },
    {
      field: 'moduleName',
      label: '所属模块',
      component: 'Select',
      componentProps: {
        placeholder: '请选择所属模块',
        clearable: true,
        filterable: true,
        options: moduleNameOptions
      }
    },
    {
      field: 'platformType',
      label: '平台类型',
      component: 'Select',
      componentProps: {
        placeholder: '请选择平台类型',
        clearable: true,
        filterable: true,
        options: platformTypeOptions
      }
    },
    {
      field: 'md5',
      label: 'md5值',
      component: 'Input',
      componentProps: {
        placeholder: '请输入md5值',
        clearable: true
      }
    },
    {
      field: 'bucketName',
      label: '存储桶名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入存储桶名称',
        clearable: true
      }
    },
    {
      field: 'sourceType',
      label: '文件来源',
      component: 'Select',
      componentProps: {
        placeholder: '请选择文件来源',
        clearable: true,
        filterable: true,
        options: sourceTypeOptions
      }
    },
    {
      field: 'expireDate',
      label: '文件过期时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择文件过期时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'fileGrade',
      label: '文件等级',
      component: 'Select',
      componentProps: {
        placeholder: '请选择文件等级',
        clearable: true,
        filterable: true,
        options: fileGradeOptions
      }
    },
    {
      field: 'createTime',
      label: '创建时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择创建时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    {
      field: 'updateTime',
      label: '更新时间',
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择更新时间',
        clearable: true,
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        shortcuts: datePickerShortcuts
      }
    },
    // [[ OnflowGenerator Range (- searchSchemas -) End ]]
    {
      field: 'createUser',
      label: '创建人',
      component: 'Select',
      componentProps: {
        placeholder: '请选择创建人',
        clearable: true,
        filterable: true,
        options: sysAccountNameList
      }
    },
    {
      field: 'updateUser',
      label: '更新人',
      component: 'Select',
      componentProps: {
        placeholder: '请选择更新人',
        clearable: true,
        filterable: true,
        options: sysAccountNameList
      }
    }
  ],
  tableColumns: [
    {
      field: 'selection',
      type: 'selection'
    },
    {
      field: 'index',
      label: '序号',
      type: 'index',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      }
    },
    // [[ OnflowGenerator Range (- tableColumns -) Start ]]
    {
      field: 'fileName',
      label: '文件名',
      sortable: 'custom'
    },
    {
      field: 'originFileName',
      label: '原文件名',
      sortable: 'custom'
    },
    {
      field: 'storePath',
      label: '文件存储路径',
      sortable: 'custom'
    },
    {
      field: 'containerType',
      label: '容器类型',
      sortable: 'custom'
    },
    {
      field: 'moduleName',
      label: '所属模块',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div>{data.row.moduleNameName}</div>
            </>
          )
        }
      }
    },
    {
      field: 'platformType',
      label: '平台类型',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div>{data.row.platformTypeName}</div>
            </>
          )
        }
      }
    },
    {
      field: 'md5',
      label: 'md5值',
      sortable: 'custom'
    },
    {
      field: 'fileSizeName',
      label: '文件大小',
      sortable: 'custom'
    },
    {
      field: 'bucketName',
      label: '存储桶名称',
      sortable: 'custom'
    },
    {
      field: 'sourceType',
      label: '文件来源',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div>{data.row.sourceTypeName}</div>
            </>
          )
        }
      }
    },
    {
      field: 'expireDate',
      label: '文件过期时间',
      sortable: 'custom'
    },
    {
      field: 'fileGrade',
      label: '文件等级',
      sortable: 'custom',
      slots: {
        default: (data: any) => {
          return (
            <>
              <div>{data.row.fileGradeName}</div>
            </>
          )
        }
      }
    },
    {
      field: 'createTime',
      label: '创建时间',
      sortable: 'custom'
    },
    {
      field: 'updateTime',
      label: '更新时间',
      sortable: 'custom'
    },
    // [[ OnflowGenerator Range (- tableColumns -) End ]]
    {
      field: 'createUserName',
      label: '创建人',
      sortable: 'custom'
    },
    {
      field: 'updateUserName',
      label: '更新人',
      sortable: 'custom'
    },
    {
      field: 'action',
      width: '260px',
      label: '操作',
      slots: {
        default: (data: any) => {
          return (
            <>
              <BaseButton type="primary" onClick={() => editData(data.row)} permission="'edit'">
                编辑
              </BaseButton>
              <BaseButton
                type="success"
                onClick={() => downloadFile(data.row)}
                permission="'download'"
              >
                下载
              </BaseButton>
              <BaseButton type="danger" onClick={() => delData(data.row)} permission="'delete'">
                删除
              </BaseButton>
            </>
          )
        }
      }
    }
  ]
})

const editData = (row: SysFileListVo) => {
  push(`${editUrl}?id=${row.id}&type=edit`)
}

const addAction = () => {
  push(`${addUrl}?type=add`)
}

const downloadFile = async (row: SysFileListVo) => {
  await sysFileDownloadApi(row.id)
}

onMounted(() => {
  getList({})
  registerRefreshEvent(sysFilePageApi)
})
</script>

<template>
  <ContentWrap>
    <Search
      :schema="allSchemas.searchSchema"
      @search="getList"
      @reset="getList"
      expandField="id"
      :searchLoading="loading"
      :resetLoading="loading"
    />

    <div class="mb-10px">
      <BaseButton type="primary" @click="addAction" permission="'add'">新增</BaseButton>
      <BaseButton :loading="delLoading" type="danger" @click="delData(null)" permission="'delete'">
        删除
      </BaseButton>
    </div>

    <Table
      v-model:pageSize="pageInfo.pageSize"
      v-model:currentPage="pageInfo.currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :stripe="true"
      :pagination="{
        total: pageInfo.totalCount
      }"
      @register="pageView.tableRegister"
      @sort-change="sortChange"
    />
  </ContentWrap>
</template>
